<template>
	<view class="bottom-button">
		<view class="btn btn1" @click="buy(1)">
			<view class="btn1-left">
				<text class="name">一发入魂</text>
				<text class="num">购买一个</text>
			</view>
			<view class="coupon-btn1-right" v-if="useCoupon">
				<view class="coupon-btn1-right-top">券后价</view>
				<view class="coupon-btn1-right-bottom">
					<image class="money-pg" src="/static/image/money.png" mode="widthFix"></image>
					<view class="price">
						<text class="big-price">{{intPrice(detailData.newprice)}}</text>
						<text class="small-price">{{numPrice(detailData.newprice)}}</text>
						<text class="old-price">{{detailData.price}}</text>
					</view>
					
				</view>
			</view>
			<view class="btn1-right" v-else>
				<image class="money-pg" src="/static/image/money.png" mode="widthFix"></image>
				<text class="text">{{detailData.price}}</text>
			</view>
		</view>
		<view class="btn btn2" @click="buy(5)" v-if="detailData.five_no_repeat==1">
			<view class="btn1-left">
				<text class="name">五发不重</text>
				<text class="num">购买5个</text>
			</view>
			<view class="coupon-btn1-right" v-if="useCoupon">
				<view class="coupon-btn1-right-top">券后价</view>
				<view class="coupon-btn1-right-bottom">
					<image class="money-pg" src="/static/image/money.png" mode="widthFix"></image>
					<view class="price">
						<text class="big-price">{{intPrice(detailData.newfiveprice)}}</text>
						<text class="small-price">{{numPrice(detailData.newfiveprice)}}</text>
						<text class="old-price">{{detailData.fiveprice}}</text>
					</view>
				</view>
			</view>
			<view class="btn1-right" v-else>
				<image class="money-pg" src="/static/image/money.png" mode="widthFix"></image>
				<text class="text">{{detailData.fiveprice}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			detailData:{
				type:Object,
			},
		},
		computed:{
			useCoupon(){
				return this.detailData.box_coupon_id>0;
			}
		},
		data() {
			return {
				// coupon:true
			}
		},
		created() {
			console.log('detailData',this.detailData)
		},
		methods: {
			buy(type){
				this.$emit("goBuy",{type});
			},
			intPrice(price){
				if(price){
					return price.toString().split('.')[0]+'.';
				}
				return '0.';
			},
			numPrice(price){
				if(price){
					return price.toString().split('.')[1];
				}
				return '00';
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bottom-button {
		position: fixed;
		// bottom: 26rpx;
		bottom: 0;
		width: 100%;
		height: 102rpx;
		z-index: 10;
		display: flex;
		justify-content: space-around;
		padding-bottom: 19rpx;
		box-sizing: border-box;
		background-image:linear-gradient(to bottom,rgba(255,255,255,0.1),#fff);
		// background: transparent;

		.btn {
			position: relative;
			width: 347rpx;
			height: 83rpx;
			border-radius: 42rpx;
			&.btn1{
				background: linear-gradient(90deg, #5383FF, #47A3F7);
				box-shadow: 0px 2rpx 8rpx 0px rgba(1, 149, 234, 0.55);
			}
			&.btn2 {
				background: linear-gradient(90deg, #9551FF, #A972FF);
				box-shadow: 0px 2rpx 8rpx 0px rgba(149, 81, 255, 0.55);
			}
			.btn1-left {
				position: absolute;
				color: #FFFFFF;
				padding: 12rpx 25rpx 0 25rpx;
				box-sizing: border-box;
			
				.name {
					display: block;
					font-weight: bolder;
					font-style: italic;
					font-size: 29rpx;
					line-height: 28rpx;
				}
			
				.num {
					display: block;
					font-weight: 500;
					font-size: 20rpx;
					line-height: 20rpx;
					padding-left: 24rpx;
					margin-top: 10rpx;
					// transform: scale(0.8);
				}
			}
			
			.btn1-right {
				height: 100%;
				position: absolute;
				right: 49rpx;
				// left: 178rpx;
				// bottom: 22rpx;
				display: flex;
				align-items: center;
			
				.money-pg {
					width: 43rpx;
					height: 56rpx;
					// background: url(../../../../static/image/money.png);
					// background-size: 100% 100%;
				}
			
				.text {
					font-size: 33rpx;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 33rpx;
					padding-left: 8rpx;
				}
			}
			.coupon-btn1-right{
				height: 100%;
				position: absolute;
				right: 14rpx;
				// left: 178rpx;
				// bottom: 22rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.coupon-btn1-right-top{
					font-size: 21rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 24rpx;
					margin-top: 15rpx;
				}
				.coupon-btn1-right-bottom{
					margin-top: 6rpx;
					display: flex;
					align-items: center;
					.money-pg {
						width: 33rpx;
						height: 33rpx;
						// background: url(../../../../static/image/money.png);
						// background-size: 100% 100%;
					}
					.price{
						font-size: 29rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 23rpx;
						display: flex;
						align-items: baseline;
						.big-price{
							font-size: 29rpx;
						}
						.small-price{
							font-size: 21rpx;
						}
						.old-price{
							font-size: 21rpx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							text-decoration: line-through;
							color: #FFFFFF;
							line-height: 24rpx;
							padding-left: 4rpx;
						}
					}
					
				}
			}
					
		}


	}
</style>
